<template>
  <div>
    <el-affix>
      <el-row style="background-color: #5599ff">
        <el-col :span="4">
          <div class="mx-3">
            <el-pagination
              background
              layout="sizes,prev,pager,next"
              :total="page.total"
              v-model:page-size="page.pageSize"
              v-model:current-page="page.pageNum"
              :page-sizes="[1, 2, 3, 4, 5]"
            />
          </div>
        </el-col>
        <el-col
          :span="16"
          class="text-center my-auto"
          style="width: 6rem; height: 3rem"
        >
          <div>我的收藏</div>
        </el-col>

        <el-col :span="4" class="text-center my-auto">
           <el-button type="primary" plain @click="this.$router.push('/detail')">返回</el-button>
          <el-button type="primary" plain @click="this.$router.push('/')">回到首页</el-button>
        </el-col>
      </el-row>
    </el-affix>
    <el-row>
      <el-card
        shadow="hover"
        v-for="note in noteli"
        :key="note.noteId"
        class="mb-2"
      >
        <el-row>
          <el-col :span="24" class="fs-3"
            ><el-link type="primary"
              ><router-link :to="{ path: '/detail/' + note.noteId }">
                  {{note.noteName}}
              </router-link></el-link
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="mt-2">{{ note.image }}</el-col>
          <el-col :span="20" class="mt-2">
            {{ note.noteIntro }}
          </el-col>
        </el-row>
        <el-row class="mt-2">
          <el-col :span="3">{{ note.authorName }}</el-col>
          <el-col :span="6" class="ps-2">{{ note.publishTime }}</el-col>
          <el-col :span="2" :offset="1"
            ><el-icon class="h-100"><Pointer /></el-icon>
            {{ note.zanNum }}</el-col
          >
          <el-col :span="2" :offset="1"
            ><el-icon class="h-100"><Star /></el-icon
            >{{ note.commentNum }}</el-col
          >
          <el-col :span="2" :offset="1">
            <el-icon class="h-100"><Chat-line-square /></el-icon
            >{{ note.viewNum }}</el-col
          >
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>


<script>
var Mock = require("mockjs");
export default {
  name: "NewsCollect",
  component: {
  },
  data() {
    return {
      search: null,
      noteli: [],
      page: {
        pageName: 1,
        pageSize: 5,
        total: 0,
      },
    };
  },
  mounted() {
    this.getNoteli();
  },
  methods: {
    getNoteli() {
      let data = Mock.mock({
        "list|10": [
          {
            noteName: "@ctitle(5,10)",
            "noteId|10": 1,
            Image: "@img(80x80)",
            "noteIntro|150": "@cword",
            authorName: "@cname",
            publishTime: "@datetime",
            "zanNum|20-100": 20,
            "commentNum|20-100": 20,
            "viewNum|20-100": 20,
          },
        ],
      });
      this.noteli = data.list;
    },
  },
};
</script>

<style>
</style>